<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<link rel="stylesheet" href="../../css/mui.min.css">
	<script src="../../js/app.js"></script>
	<script src="../../js/mui.min.js"></script>
	<script src="../../js/upload.js"></script>
	<title>发布</title>
	<style type="text/css">  
select{
	padding: 3px;
	margin: 2px;
	font-size: 17px;
}
textarea{
	width:98%;margin-left:1%;margin-top: 1px;font-size: 17px;
}
</style> 
</head>
<body>
	<header class="mui-bar mui-bar-nav">
	    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
	    <h1 class="mui-title">发布</h1>
	</header>
<div id="uploader" class="mui-content"style="font-size: 17px;">
   <div id="picture" name="picture" style="margin-left:1px;"><img src="" alt="" /></div> 
   <div id="myBtn" style="width:100px;margin:6px;float:left;height:100px;padding:10px;" ><img  style="float:initial;width:80px;" src="../../images/iconfont-tianjia.png"/></div>
   <textarea maxlength="300" type="text" name="mess" id="mess" rows="3" cols="30" placeholder="请输入文字内容"></textarea>
       <div id="guanlian" name="guanlian" style="width:100%;float:left;margin-top: -12px;">
    <div style="width:16%;float:left;margin-left:3px;padding: 5px;">关联:</div>
    <select id="opta"style="width:28%;" onchange="getsel()">
  <option value="0">请选择类别</option>
  <option value="xiangmu">项目</option>
  <option value="ziyuan">资源</option>
  <option value="jishu">技术</option>
  <option value="qita">其他</option>
 </select> 
 <select id="optb" style="width:50%;" >
  <option value="0">选择您发布的资源</option>
 </select>
   </div>
    <button type="button" data-loading-text="提交中" onclick="ok()"  style="float:right;margin-right: 1%;width: 98%;margin-top: 8px;" class="mui-btn mui-btn-primary">发送</button>
    <button type="button" data-loading-text="提交中" style="float:right;margin-right: 1%;width: 98%;margin-top: 8px;" class="mui-btn mui-btn-primary" onclick="tijiao()">测试</button>
    <img id="abcceshi" src="" alt="" />
</div> 
<script type="text/javascript" > 
var type=64;//可不填。返回类型（file/64base）;
var imgnames='imgs';//img对应的name值
var upload=new uploadimg(imgsplay,type);//实例化类
var picture=document.getElementById('picture');
function imgsplay(path){//两个参数path必填是图片路径，type=64可填，返回数据类型。默认不填返回图片源文件,64=返回64base压缩类型
if(type===64){//判断是否需要64base转码压缩
		var image = new Image();
			image.src = path;  
			image.onload = function(){
			var img_typearr=['jpeg','jpg','bmp','png'];//支持格式类型
			_type=upload.appendFile(img_typearr,path);//检查是否支持,返回false 或者后缀名
			if(_type){
			var is_type="image/jpeg";//压缩格式
			var ratio=0.9;//压缩质量
			var width=1080;//压缩后最长边距像素；
		    path = compress(image,width, ratio,is_type);//压缩图片转成64base后显示
		    imgplay(path);
			}}
}else{
	imgplay(path);
}
function imgplay(path){//
	picture.innerHTML+='<div  id="'+path+'" onclick="upload.delete_id(this.id,picture)" style="width:30%;float:left;height:100px;margin:1%;overflow:hidden;position:relative;font-size:10px;border-radius:5px;" ><span style="background:#FF6A6A;margin-top:0;border-radius:6px;width:18px;height:18px;position:absolute;text-align :center;color:#fff;line-height:18px; z-index:1;">X</span><img style=" position:relative;  z-index:0;max-height: 200%;max-width: 200%;width: auto;height: auto;top: 50%;left: 50%;-webkit-transform: translateX(-50%) translateY(-50%);transform: translateX(-50%) translateY(-50%);" name="'+imgnames+'" src="'+path+'" alt="" /></div>';
}
};

mui.plusReady(function() {//初始化 
	var maxnum=9;//限制上传图片数量
document.getElementById("myBtn").onclick=function(){//单击id
	var lasnum=maxnum-document.getElementsByName(imgnames).length;
	upload.addImage(maxnum,lasnum,'picture');//图片img外层id
};
})
//mui.post(home.hos+'/user/item',apptoken,function(data){
//		//服务器返回响应，根据响应结果，分析是否登录成功;
//	},'json'
//); 
var opta=document.getElementById("opta");//定义下拉列表主表
var listJson={'0':'选择关联类','item':'项目','ziyuan':'资源','jishu':'技术','qita':'其他'};//定义主表菜单列表
selectone();//执行下拉选择列表
function selectone(){
var i=0;
var lisk='';
for(var p in listJson){//遍历json对象的每个key/value对,p为key
	lisk+='<option value="'+p+'">'+listJson[p]+'</option>';
}
opta.innerHTML='<select id="opta"style="width:28%;" onchange="getsel()">'+lisk+' </select>';

}
function getsel(){
	//去本地数据库读取个人发布的信息，字段key=opta.value;
var optb=document.getElementById("optb");
if(opta.value=='0'){
		optb.innerHTML='<option value="0">请选择您的资源</option>';
		return false;}
result=injsonstr('',opta.value)||[];//自定义函数从本地数据库取出并且转换成数组
if(result.length===0){
	alert('对不起不存在'+listJson[opta.value]+'信息,请您发布该类信息后，再添加关联！');
	selectone();//还原下拉列表
return false;};
//key是本地数据库的键值，
var vals='';
for(var i=0;i<result.length;i++){
	vals += '"'+result[i].id+'":"'+result[i].title+'",';
		}
	vals=vals.substring(0, vals.lastIndexOf(',')); //去尾字符]
var listval=JSON.parse('{'+vals+'}');
var val='';
	for(var pb in listval){
		val +='<option value="'+pb+'">'+listval[pb]+'</option>';
	}
	optb.innerHTML='<select id="optb"style="width:28%;" onchange="">'+val+' </select> ';
}

function ok(){
	var sizenum=1;
	if(document.getElementById('mess').value.length<sizenum){
		alert('故事简介最少需要'+sizenum+'字，请从新提交');
		return false;
	}
	// 得到页面中所有input	
	var allimg = document.getElementsByName('imgs');
	var allimgarr = [];
	// 在所有Input中过滤出type="text" and name="libID"的元素，放到数组libIds中  && allInputs[i].name === 'libname'
	for (var i = 0; i < allimg.length; i++) {
		if (allimg[i].src != '') 
		{
			allimgarr.push(allimg[i].src);//把图片装入数组
			}
		}
mui.post(home.hos+'/microblog/publish',Object.assign(apptoken,{
		content:document.getElementById('mess').value,
		relation:opta.value,
		relation_id:optb.value,
		imgarr:allimgarr
	}),function(data){
		alert(data);
		if(data!=200){
			plus.ui.toast("发布失败,请重新尝试，错误码".data);
		}else{
				alert("发布成功");
				mui.back();
				var list = plus.webview.currentWebview().opener();
				//触发父页面的自定义事件(refresh),从而进行刷新
				 mui.fire(list, 'refresh');
				//返回true,继续页面关闭逻辑
				return true;
				}
		//服务器返回响应，根据响应结果，分析是否登录成功；
	},'text'
);}
</script>
</body>
</html>